// 控件数据设置
import useWidget from '@/libs/edit/widgetData'
import useWidgetView from '@/libs/edit/widgetView'

export default function useWidgetSetting() {
    const {
        widgetListFlat,
        onSelectWidget
    } = useWidget()
    
    const {
        getWidgetDom,
        getWidgetViewDom
    } = useWidgetView()

    /**
     * 设置控件对齐
     * @param {Array} widgetId 控件id
     * @param {String} type 对齐类型 (left左对齐，vertical水平居中对齐，right右对齐，top顶对齐， horizontal垂直居中对齐，bottom底对齐，horizontalEquidistant水平等间距分布，verticalEquidistant垂直等间距分布)
     */
    const onAlign = (widgetId, type) => {
        if (widgetId.length === 0) return
        const { isFreeWidget } = widgetListFlat.value?.[widgetId[0]]
        if (isFreeWidget && widgetId.length > 1) {
            const positions = widgetId.map(id => {
                const { offsetWidth, offsetHeight } = getWidgetDom(id)
                const { offsetLeft, offsetTop } = getWidgetViewDom(id)
                return { id, offsetLeft, offsetTop, offsetWidth, offsetHeight }
            })
            const minLeft = Math.min(...positions.map(item => item.offsetLeft))
            const minTop = Math.min(...positions.map(item => item.offsetTop))
            const maxRight = Math.max(...positions.map(item => item.offsetLeft + item.offsetWidth))
            const maxBottom = Math.max(...positions.map(item => item.offsetTop + item.offsetHeight))

            // 遍历控件集，返回回调函数
            function forEachWidgets(callback) {
                widgetId.forEach(id => {
                    const widgetDom = getWidgetDom(id)
                    const { widgetData } = widgetListFlat.value?.[id] || {}
                    callback(widgetData, widgetDom)
                })
            }

            switch (type) {
                case 'left':
                    forEachWidgets((widgetData, _) => {
                        widgetData.eles.style.left = `${minLeft}px`
                    })
                    break;
                case 'vertical':
                    forEachWidgets((widgetData, widgetDom) => {
                        widgetData.eles.style.left = `${(((maxRight - minLeft) - widgetDom.offsetWidth) / 2) + minLeft}px`
                    })
                    break;
                case 'right':
                    forEachWidgets((widgetData, widgetDom) => {
                        widgetData.eles.style.left = `${maxRight - widgetDom.offsetWidth}px`
                    })
                    break;
                case 'top':
                    forEachWidgets((widgetData, _) => {
                        widgetData.eles.style.top = `${minTop}px`
                    })
                    break;
                case 'horizontal':
                    forEachWidgets((widgetData, widgetDom) => {
                        widgetData.eles.style.top = `${(((maxBottom - minTop) - widgetDom.offsetHeight) / 2) + minTop}px`
                    })
                    break;
                case 'bottom':
                    forEachWidgets((widgetData, widgetDom) => {
                        widgetData.eles.style.top = `${maxBottom - widgetDom.offsetHeight}px`
                    })
                    break;
                case 'horizontalEquidistant':
                    const totalWidth = positions.map(item => item.offsetWidth).reduce((prev, curr) => prev + curr)
                    const horizontalEquidistantNum = ((maxRight - minLeft) - totalWidth) / (widgetId.length - 1)
                    positions.sort((a, b) => a.offsetLeft - b.offsetLeft)
                    positions.forEach((item, index) => {
                        const { offsetLeft, offsetWidth } = item
                        const { widgetData } = widgetListFlat.value?.[item.id] || {}
                        const widgetStyle = widgetData.eles.style
                        if ((offsetLeft <= minLeft && index === 0) || (offsetLeft + offsetWidth >= maxRight && index === positions.length - 1)) return
                        const preWidth = positions.slice(0, index).map(item => item.offsetWidth).reduce((prev, curr) => prev + curr)
                        widgetStyle.left = `${(preWidth + horizontalEquidistantNum * index) + minLeft}px`
                    })
                    break;
                case 'verticalEquidistant':
                    const totalHeight = positions.map(item => item.offsetHeight).reduce((prev, curr) => prev + curr)
                    const verticalEquidistantNum = ((maxBottom - minTop) - totalHeight) / (widgetId.length - 1)
                    positions.sort((a, b) => a.offsetTop - b.offsetTop)
                    positions.forEach((item, index) => {
                        const { offsetTop, offsetHeight } = item
                        const { widgetData } = widgetListFlat.value?.[item.id] || {}
                        const widgetStyle = widgetData.eles.style
                        if ((offsetTop <= minTop && index === 0) || (offsetTop + offsetHeight >= maxBottom && index === positions.length - 1)) return
                        const preHeight = positions.slice(0, index).map(item => item.offsetHeight).reduce((prev, curr) => prev + curr)
                        widgetStyle.top = `${(preHeight + verticalEquidistantNum * index) + minTop}px`
                    })
                    break;
            }
            onSelectWidget([])
            setTimeout(() => {
                onSelectWidget(widgetId)
            }, 10)
        } else {
            widgetId.forEach(id => {
                const { widgetData, parentId } = widgetListFlat.value?.[id] || {}
                const widgetParent = widgetListFlat.value[parentId]
                const maxWidth = isFreeWidget ? parseInt(widgetParent.widgetData.eles.style.width) : 320
                const maxHeight = isFreeWidget ? parseInt(widgetParent.widgetData.eles.style.height) : 0
                const { offsetWidth: domW, offsetHeight: domH } = getWidgetDom(widgetData.eles.id)
                const widgetStyle = widgetData.eles.style
                switch (type) {
                    case 'left':
                        // widgetStyle[isFreeWidget ? 'left' : 'margin-left'] = '0px'
                        if (isFreeWidget) {
                            widgetStyle.left = '0px'
                        } else {
                            widgetStyle['margin-left'] = '0px'
                            widgetStyle['margin-right'] = 'auto'
                        }
                        break;
                    case 'vertical':
                        // widgetStyle[isFreeWidget ? 'left' : 'margin-left'] = `${(maxWidth - domW) / 2}px`
                        if (isFreeWidget) {
                            widgetStyle.left = `${(maxWidth - domW) / 2}px`
                        } else {
                            widgetStyle['margin-left'] = 'auto'
                            widgetStyle['margin-right'] = 'auto'
                        }
                        break;
                    case 'right':
                        // widgetStyle[isFreeWidget ? 'left' : 'margin-left'] = `${(domW === maxWidth) ? 0 : (maxWidth - domW)}px`
                        if (isFreeWidget) {
                            widgetStyle.left = `${(domW === maxWidth) ? 0 : (maxWidth - domW)}px`
                        } else {
                            widgetStyle['margin-left'] = 'auto'
                            widgetStyle['margin-right'] = '0px'
                        }
                        break;
                    case 'top':
                        widgetStyle.top = '0px'
                        break;
                    case 'horizontal':
                        widgetStyle.top = `${(maxHeight - domH) / 2}px`
                        break;
                    case 'bottom':
                        widgetStyle.top = `${(domH === maxHeight) ? 0 : (maxHeight - domH)}px`
                        break;
                }
            })
        }
    }

    return {
        onAlign
    }
}